<template>
  <div class="container">
    <h1>vue3模版</h1>
    包含以下组件
    <ul>
      <li>vue-router路由系统</li>
      <li>less 扩展语言</li>
      <li>pinia状态管理库</li>
      <li>axios网络请求库</li>
      <li>mock模拟数据工具</li>
      <li>prettier以及elint格式化代码</li>
      <li>keepAlive路由页面缓存</li>
    </ul>
    <!-- 请求 -->
    <div class="example">
      <div>(1)示例发送请求</div>
      <button @click="sendHttp">发送请求</button>
    </div>
    <div class="example">
      <div>(2)keepAlive路由页面缓存</div>
      <div>src/router/index.ts下配置</div>
      <pre> meta: { title: '首页', keepAlive: true }</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onActivated } from 'vue'
onMounted(() => {
  console.log('indexmounted')
})
onActivated(() => {
  console.log('indexonActivated')
})
// --------使用请求axios
import { getDataApi } from '../http/api'

const sendHttp = () => {
  getDataApi({ a: '111' })
}
</script>

<style scoped lang="less">
.container {
  padding: 25px;
  .example {
    margin: 15px 0;
  }
}
</style>
